<template>
	<view>
		<view>
			<u-tabs :list="tabList" lineWidth="32" lineHeight="4" :scrollable="false"
				lineColor="linear-gradient(170deg, #FFA5F5, #319EFF)" :inactiveStyle="{'color':'#999'}"
				:activeStyle="{'color':'#34314F','fontWeight':'bold'}" @click="tabClick" :current="current"></u-tabs>
		</view>
		<view class="m30" v-if="listData.length > 0">
			<view class="bgFff radius30 p20 mb30 pore" v-for="(item,index) in listData" :key="index"
				@click="openUrl('/subpage/meethuangshi/activityDetail?id=' + item.id)">
				<view class="flex mt30">
					<image v-if="item.isOrganize == 1" :src="'https://hxs.dsjhs.com:553/prod-api/profile/yujian/tag_3.png'" mode=""
						style="width: 120rpx;height: 48rpx;"></image>
					<image v-else :src="'https://hxs.dsjhs.com:553/prod-api/profile/yujian/tag_1.png'" mode=""
						style="width: 120rpx;height: 48rpx;"></image>
					<text class="c343 bold ml20 textoverflow">{{item.name}}</text>
				</view>
				<view class="mt20 flex flex-wrap" v-if="item.tag">
					<view class="p10 c343 f24 c666 bgF7 radius50 mr20 mb20" v-for="(tag,i) in item.tag.split(',')"
						:key="i">{{tag}}</view>
				</view>
				<view class="flex mb20">
					<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/sj.png" mode=""
						style="width: 32rpx;height: 32rpx;"></image>
					<text class="c999 f26 ml10">{{item.startDate}} - {{item.endDate}}</text>
				</view>
				<view class="flex mb20">
					<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/dz.png" mode=""
						style="width: 32rpx;height: 32rpx;"></image>
					<text class="c999 f26 ml10">{{item.distance}} {{item.address}}</text>
				</view>
				<view class="flex">
					<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/user.png" mode=""
						style="width: 32rpx;height: 32rpx;">
					</image>
					<text class="c999 f26 ml10">{{item.promoter}}</text>
				</view>
				<u-line color="#eee" margin="20rpx 0"></u-line>
				<view class="flex-jus">
					<view class="flex">
						<u-avatar-group :urls="item.urls" size="24" gap="0.4"></u-avatar-group>
						<text class="ml10 f24 c999">{{item.registrationCount}}人已报名</text>
					</view>
					<view class="textC" v-if="item.userId == userInfo.id">
						<view class="c999 f24 mb10" v-if="item.reviewStatus == 2">审核未通过</view>
						<u-tag :text="shStatusList[item.reviewStatus].name" shape="circle" size="large"
							:borderColor="shStatusList[item.reviewStatus].bgColor"
							:bgColor="shStatusList[item.reviewStatus].bgColor"
							:color="shStatusList[item.reviewStatus].color"
							:type="shStatusList[item.reviewStatus].type" @click="toExam(item)"></u-tag>
					</view>
					<view class="textC" v-else>
						<u-tag :text="bmStatusList[item.orgActStatus].name" shape="circle" size="large"
							:borderColor="bmStatusList[item.orgActStatus].bgColor"
							:bgColor="bmStatusList[item.orgActStatus].bgColor"
							:color="bmStatusList[item.orgActStatus].color"
							:type="bmStatusList[item.orgActStatus].type"></u-tag>
					</view>
				</view>
				<view class="status-img">
					<image :src="'https://hxs.dsjhs.com:553/prod-api/profile/yujian/hd_' +  item.actStatus + '.png'"
						mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myJoinAct,
		myPublishAct
	} from '@/common/api_meethuangshi.js'
	export default {
		name: '',
		data() {
			return {
				latitude: null,
				longitude: null,
				current: 0,
				tabList: [{
						name: '我参与的',
						value: 'join'
					},
					{
						name: '我发起的',
						value: 'publish'
					}
				],
				listData: [],
				statusList: {
					1: {
						type: 'ing',
						name: '进行中'
					},
					2: {
						type: 'end',
						name: '已结束'
					}
				},
				bmStatusList: {
					'-1':{
						bgColor: '#F3F3F5',
						color: '#333',
						type: 'info',
						name: '未报名'
					},
					0: {
						bgColor: '#F3F3F5',
						color: '#333',
						type: 'info',
						name: '待审核'
					},
					1: {
						bgColor: '#dbf1e1',
						color: '#2FB566',
						type: 'success',
						name: '报名通过'
					},
					2: {
						bgColor: '#F3F3F5',
						color: '#333',
						type: 'error',
						name: '报名失败'
					}
				},
				shStatusList: {
					0: {
						bgColor: '#F3F3F5',
						color: '#333',
						type: 'info',
						name: '待审核'
					},
					1: {
						bgColor: '#dbf1e1',
						color: '#2FB566',
						type: 'success',
						name: '报名审核'
					},
					2: {
						bgColor: '#F3F3F5',
						color: '#333',
						type: 'error',
						name: '审核拒绝'
					},
					3: {
						bgColor: '#E7F4FF',
						color: '#319EFF',
						type: 'primary',
						name: '报名审核'
					}
				}
			}
		},
		onLoad(option) {
			this.getLocation()
		},
		methods: {
			getLocation() {
				const that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						const {
							latitude,
							longitude
						} = res;
						that.latitude = latitude;
						that.longitude = longitude;
						that.getMyAct()
					},
					fail() {
						that.getMyAct()
					}
				});
			},
			tabClick(item) {
				this.current = item.index;
				this.getMyAct()
			},
			toExam(item){
				if(item.actStatus == 1 && item.reviewStatus == 1){
					this.openUrl('/subpage/meethuangshi/actExamine?id=' + item.id)
				}
				console.log(item);
			},
			async getMyAct() {
				const userId = await this.getUserId()
				if (!userId) {
					console.log('用户信息获取失败或用户未登录')
					return
				}
				let res = null;
				if (this.tabList[this.current].value == 'join') {
					res = await myJoinAct({
						userId
					})
				} else {
					res = await myPublishAct({
						userId
					})
				}
				if (res.code === 200) {
					this.listData = res.data;
					this.listData.forEach(item => {
						item.urls = [];
						item.orgActStatus = item.orgActStatus == null? '-1':item.orgActStatus;
						item.urls.length = item.registrationCount;
						item.distance = this.$utils.getDistance(this.latitude, this.longitude, item.location
							.split(',')[0], item.location.split(',')[1]);
					})
					console.log(this.listData);
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F6FF;
	}

	.status-img {
		position: absolute;
		right: 0;
		top: 0;

		image {
			width: 100rpx;
		}
	}
</style>